<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为鸿蒙HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态</title>
    <link rel="Shortcut Icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/HarmonyOS.css">
    <link rel="stylesheet" href="../libs/iconfont.css">
    <link rel="stylesheet" href="../css/common/footer.css">
    <link rel="stylesheet" href="../css/common/reset.css">
    <link rel="stylesheet" href="../libs/swiper-bundle.min.css">
</head>
<body>
    <div class="top-nav">
        <div class="between"></div>
        <div class="center">
            <div class="top-tools">
                <ul>
                    <li><a href="">简体中文</a> <span class="iconfont icon-xiala"></span></li>
                    <li class="center-tool"><a href="">登录</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div>
        </div>
        <div class="between"></div>
    </div>
    <header>
        <div class="between"></div>
        <div class="center">
            <div class="menu-left">
                <div class="menu-logo">
                    <img src="../img/harmonyOS_logo.png" alt="">
                </div>
            </div>
            <div class="menu-center">
                <ul>
                    <li><a href="">开发</a></li>
                    <li><a href="">活动</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">生态合作</a></li>
                    <li><a href="">开发者社区</a></li>
                </ul>
            </div>
            <div class="menu-right">
                <input type="text">
                <span class="iconfont icon-sousuo"></span>
            </div>
        </div>
        <div class="between"></div>
    </header>
    <div class="banner">
        <div class="swiper" style="width: 100%;height: 510px;">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../img/chuangxindasai4.png" alt="" style="width: 100%; height: 100%;"></div>
                <div class="swiper-slide"><img src="../img/hdd-banner-0506.jpg" alt="" style="width: 100%; height: 100%;"></div>
                <div class="swiper-slide"><img src="../img/img_HO_ArkUI.png" alt="" style="width: 100%; height: 100%;"></div>
                <div class="swiper-slide"><img src="../img/pic_banner_SDK.jpg" alt="" style="width: 100%; height: 100%;"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="content-box-c">
            <h4>HarmonyOS 3.0.0 开发者预览版</h4>
            <span>全新发布API Version 7 和ArkUI。API Version 7 提供丰富的TS/JS API，覆盖基础分布式能力，ArkUI是一套构建HarmonyOS应用界面的声明式UI开发框架，用简洁的代码实现界面开发。</span>
            <div class="button">
                了解更多
            </div>
        </div>
    </div>
    <div class="wrap">
        <div class="between"></div>
        <div class="center">
            <h2>
                加入生态
            </h2>
            <div class="content">
                <div class="items_link-card">
                    <div class="image">
                        <img src="../img/Floor6_1_pic_hormonyos_shengtai_yingyong.png" alt="">
                    </div>
                    <h3>应用开发</h3>
                    <p>支持轻松调用设备组合中的不同硬件能力、支持多设备无缝协同，为应用开发者带来丰富的体验想象空间。</p>
                    <div class="button-box">
                        <span class="iconfont icon-right-circle"></span>
                    </div>
                </div>
                <div class="items_link-card">
                    <div class="image">
                        <img src="../img/Floor6_2_pic_hormonyos_shengtai_shebei.png" alt="">
                    </div>
                    <h3>设备开发</h3>
                    <p>提供灵活可定制的开源操作系统，满足不同设备开发需求；设备接入后，可与华为 1+8 设备形成天然的分布式能力互助，高效触达亿级用户。</p>
                    <div class="button-box">
                        <span class="iconfont icon-right-circle"></span>
                    </div>
                </div>
                <div class="items_link-card">
                    <div class="image">
                        <img src="../img/Floor6_3_pic_hormonyos_shengtai_huoban.png" alt="">
                    </div>
                    <h3>设备合作伙伴</h3>
                    <p>加入合作计划，成为 HarmonyOS Connect 品牌合作伙伴、解决方案伙伴、芯片与模组伙伴等。</p>
                    <div class="button-box">
                        <span class="iconfont icon-right-circle"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="between"></div>
    </div>
    <footer></footer>
    <script src="../libs/jquery.min.js"></script>
    <script src="../libs/swiper-bundle.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            spaceBetween: 0,//间隔
            autoplay: true,//可选选项，自动滑动
            pagination: { //分页器
                el: '.swiper-pagination', //类型
                clickable: true,
            },
            loop: true, //循环切换
            navigation: { //左右切换标识
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

        //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
        new Swiper('.swiper')
        var mySwiper = document.querySelector('.swiper').swiper
        mySwiper.slideNext();
    </script>
    <script>
        $('footer').load('./common/footer.html')
    </script>
</body>
</html>